<template>
    <h1>Class 与 Style 绑定</h1>
    <!-- https://cn.vuejs.org/guide/essentials/class-and-style.html -->
    <!-- 在Vue2中，静态属性和动态属性同时使用时，不确定最终哪个起作用。
         在Vue3中，这是可以确定的，当动态属性使用 :title 方式绑定时，谁在前面谁起作用；当动态属性使用 v-bind='object'方式绑定时，谁在后面谁起作用。 -->
  <!-- 这种写法，同时绑定静态和动态属性时，谁在前面谁生效！   -->
  <div id='red' :id='("blue")'>不负当下</div>
  <div :title='("hello")' title='world'>不畏未来</div>
  <hr>
  <!-- 这种写法，同时绑定静态和动态属性时，谁在后面谁生效！ -->
  <div id='red' v-bind='{id:"blue"}'>不负当下</div>
  <div v-bind='{title:"hello"}' title='world'>不畏未来</div>
</template> 
 

  
<script setup>
import {ref, reactive, computed } from "vue";



</script>



